<template>
  <el-dialog v-model="isShow" :title="currentKnowledge.knowledgeVO.name" destroy-on-close>
    <div class="mt-20">
      <el-card class="card">
        <div class="flex flex-between">
          <div>
            <img :src="url + currentKnowledge.knowledgeVO.attach.id" alt="" class="img" />
          </div>
          <div class="flex1">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="课件个数：" label-class-name="my-label">{{ knowledgeLists.length
                }}个</el-descriptions-item>
              <el-descriptions-item label="学习时长：">
                {{ currentKnowledge.knowledgeVO.studyTime.studyTimeHour }}小时 /
                {{ currentKnowledge.knowledgeVO.countRequireTimeHour }}小时
              </el-descriptions-item>
              <el-descriptions-item label="密&nbsp; &nbsp; &nbsp; &nbsp;级：">{{
    currentKnowledge.knowledgeVO.securityName
  }}</el-descriptions-item>
              <el-descriptions-item label="知识点描述：">
                {{ currentKnowledge.knowledgeVO.note }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-card>

      <el-card class="mt40 card">
        <el-table :data="knowledgeLists" style="width: 100%" border stripe>
          <el-table-column prop="name" label="课件名称"> </el-table-column>
          <el-table-column prop="studyTimeHour" label="已学时长(小时)"></el-table-column>
          <el-table-column prop="requireTimeHour" label="总时长(小时)"></el-table-column>
          <el-table-column prop="actions" label="学习">
            <template #default="{ row }">
              <el-button type="primary" @click="openStudy(row, 0)" v-if="row.studyStatus == 1">
                继续
              </el-button>
              <el-button type="primary" @click="openStudy(row, 1)" v-else> 开始 </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex flex-center mt10">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="page.total">
          </el-pagination>
        </div>
      </el-card>
      <Review ref="review" @close="onclose" @ratechange="ratechange"> </Review>
    </div>
  </el-dialog>
</template>

<script>
import { getList, start, serverTime, studySubmit } from '@/api/position/courseware';
import Review from '../basicStore/review.vue';

export default {
  components: { Review },
  data() {
    return {
      isShow: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 1000,
      },
      query: {},
      noImg: '../noImg.jpg',
      knowledgeLists: [],
      item: {
        name: '',
      },
      query: {},
      times: 0,
      currentKnowledge: {
        knowledgeVO: {
          name: '',
          studyTime: {},
        },
      },
      bili: 1,
      url: this.baseHost + '/blade-resource/oss/endpoint/viewFile/'
    };
  },
  methods: {
    open(currentKnowledge) {
      this.currentKnowledge = currentKnowledge;
      this.isShow = true;
      this.getData();
    },
    handleSizeChange(e) {
      this.page.pageSize = e;
      this.getData();
    },
    handleCurrentChange(e) {
      this.page.currentPage = e;
      this.getData();
    },
    getData() {
      const values = {
        knowledgeId: this.currentKnowledge.knowledgeId,
      };
      getList(this.page.currentPage, this.page.pageSize, values).then(res => {
        this.page.total = res.data.data.total;
        this.knowledgeLists = res.data.data.records;
      });
    },
    async openStudy(item, type) {
      console.log('openStudy', item, type, this.currentKnowledge);
      this.item = item;
      item.securityName = this.currentKnowledge.knowledgeVO.securityName;
      this.$refs.review.open(item, type);
      if (type) {
        await start(item.id);
      }

      const res = await serverTime();
      this.startTime = res.data.data;
      this.startStudy();
    },
    startStudy() {
      this.timer = setTimeout(() => {
        if (!this.$refs.review.isShow) {
          this.startStudy();
          return;
        }
        this.times += this.bili * 15;
        studySubmit({
          startTime: this.startTime,
          coursewareId: this.item.id,
          knowledgeId: this.item.knowledgeId,
          studyTime: this.times,
        });
        this.startStudy();
      }, 15000);
    },
    onclose() {
      if (this.timer) {
        this.times += this.bili * 15;
        studySubmit({
          startTime: this.startTime,
          coursewareId: this.item.id,
          knowledgeId: this.item.knowledgeId,
          studyTime: this.times,
        });
        clearTimeout(this.timer);
        this.timer = null;
        this.times = 0;
      }
      this.getData();
    },
    ratechange(e) {
      this.bili = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.img {
  width: 200px;
  height: 150px;
}

:deep(.el-dialog__body) {
  padding-top: 0 !important;
}

:deep(.el-descriptions__cell),
:deep(.cell) {
  text-align: center !important;
  color: var(--el-text-color-regular);
}

.card {
  box-shadow: 0 0 10px #ccc;
}
</style>
